<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转菜单</title>
    <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"><link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 菜单部分 -->
    <nav class="menu">
        <input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
        <label for="menu-toggler"></label>
        <ul>
            <li class="menu-item">
                <a class="fa fa-weibo" href="javascript:void(0)"></a>
            </li>
            <li class="menu-item">
                <a class="fa fa-youtube" href="javascript:void(0)"></a>
            </li>
            <li class="menu-item">
                <a class="fa fa-wordpress" href="javascript:void(0)"></a>
            </li>
            <li class="menu-item">
                <a class="fa fa-qq" href="javascript:void(0)"></a>
            </li>
            <li class="menu-item">
                <a class="fa fa-weixin" href="javascript:void(0)"></a>
            </li>
            <li class="menu-item">
                <a class="fa fa-github" href="javascript:void(0)"></a>
            </li>
        </ul>
    </nav>
</body>
</html>